<template>
    <div class="m-video">
            <div :class="{'z-top': showedTopViedo && !needFakeFullScreen, 'z-full': needFakeFullScreen}"
                :style="needFakeFullScreen ? fullHeightStyle : {}"
                class="video"
                >
                <!-- 未登录蒙版 -->
                <div class="shade" v-show="!remberLogin && liveType == 2"></div>

                <!-- 直播结束显示图 -->
                <img v-show="liveIsOver && isLogined" src="https://haierzzfbmedia.oss-cn-beijing.aliyuncs.com/1568966424047banner.png" class="live-over-show">

                <!-- 播放器容器 -->
                <div :class="{'z-hide': needHideVideo}"
                    class="prism-player"
                    ref="video"
                    id="player-con"
                    :style="[bgPic ? videoBg : '']">
                </div>

                <!-- 直播头像/在线人数 -->
                <div class="video-info" :class="videoIsFullScreen ? 'z-fs' : ''" v-if="annoInfo!=null">
                    <span class="video-view" v-if="viewsNumber!=''">{{ viewsNumber }}人在线</span>
                </div>

                <!-- 播放器控制组件 -->
                <div v-show="showedVideoControlBar && !isOverdueHiddenVideoControlBar" class="video-controller">
                    <!-- 全屏 -->
                    <div class="video-btn"
                        :class="{'z-on': videoIsFullScreen}"
                        @touchstart.stop.prevent="shiftFullVideo"
                        @click.stop.prevent>
                        <img src="./../assets/to-full-screen.png">
                        <img src="./../assets/to-small-screen.png">
                    </div>
                </div>


                <!-- 关闭页面 -->
                <div class="close-btn"
                    @touchstart.stop.prevent="closePage"
                    v-if="isAppEnv"
                    v-show="showedTopViedo &&  !needFakeFullScreen">
                    <img src="./../assets/close2.png">
                </div>
            </div>
        </div>
</template>
<script>
import ingAvatar from "./../assets/ing-avatar.jpg";
export default {
    data(){
        return {
            // 是否悬浮置顶播放器
            showedTopViedo: false,
            // 显示播放器控制台
            showedVideoControlBar: false,
            //是否已登录
            isLogined: false,
            remberLogin:window.sessionStorage.remberLogin ? window.sessionStorage.remberLogin : "",
            // 1普通 2密码
            liveType: "",
            // 直播已结束
            liveIsOver: false,
            bgPic:true,
            //直播信息
            annoInfo:{},
            // 视频是否全屏
            videoIsFullScreen: false,
            // 显示5s后隐藏控制栏
            isOverdueHiddenVideoControlBar: false,
            // 是否是原生app环境
            isAppEnv: (typeof window.webkit != 'undefined' && typeof window.webkit.messageHandlers != 'undefined' && typeof window.webkit.messageHandlers.Goshare != 'undefined') || typeof window.JsInterface !='undefined',
            isAndAppEnv: typeof window.JsInterface !='undefined',
            isIosAppEnv: (typeof window.webkit != 'undefined' && typeof window.webkit.messageHandlers != 'undefined' && typeof window.webkit.messageHandlers.Goshare != 'undefined'),
            videoBg:{
                backgroundImage:"url(https://haierzzfbmedia.oss-cn-beijing.aliyuncs.com/1568966424047banner.png)" ,
            },
            // 观看人数
            viewsNumber: '',
        }
    },
    mounted(){
        this.iniVideo();
    },
    computed: {
        // 满屏高度样式，替代100vh，以达到随浏览器高度实时变化
        fullHeightStyle(){
            return {
                height: this.clientHeight + 'px'
            };
        },
        // 需要伪全屏
        needFakeFullScreen(){
            return this.isCrosswise || this.videoIsFullScreen;
        },
        // 需要隐藏播放器，在有弹窗蒙版情况下
        needHideVideo(){
            return this.showLogin || this.clickTVBOx;
        },
    },
    watch: {

        // 是否显示人脸识别提示
        showedDisernHint(val){
            if(val){
                setTimeout(()=>{
                    this.readDisernHint();
                }, 5000);
            }
        },
    },
    methods: {
        // 初始化播放器
        iniVideo(){
            // console.log(this.videoSource)
            var that = this;
            var player = new Aliplayer({
                "id": "player-con",
                // "source": that.videoSource,
                "source":"http://ai-live-vod.oss-cn-beijing.aliyuncs.com/record/ai-live/record/ai-live/2ff8bfd07b144714b6e3db65b642439d/2019-10-01-08-19-49_2019-10-01-12-47-40.mp4",
                "width": "100%",
                "height": "100%",
                "autoplay":false,
                // "isLive": true,
                "isLive": false,
                "playsinline": true,
                "preload": true,
                "showBuffer":true,
                "controlBarVisibility": "click",
                "useH5Prism": true,
                "extraInfo":{
                    "crossOrigin":"anonymous",
                    "liveRetry":1,
                },
                "cover":"https://haierzzfbmedia.oss-cn-beijing.aliyuncs.com/1568966424047banner.png",
            }, function (player) {
                console.log("The player is created");
                that.bgPic = false;
                player.on('error', ()=>{
                    that.liveIsOver = true;
                    that.bgPic = true;
                });

                player.on('liveStreamStop', ()=>{
                    // this.liveIsOver = true;
                });

                player.on('canplay', ()=>{
                    that.liveIsOver = false;
                });
                

                player.on('showBar', ()=>{
                    // player.getComponent('fakeFullScreen').$html.style.display = 'block';
                    that.showedVideoControlBar = true;
                    // that.overdueHiddenVideoControlBar();
                });

                player.on('hideBar', ()=>{
                    that.showedVideoControlBar = false;
                    that.quality = false;
                    that.qualityFullScreen = false;
                    // console.log("隐藏")
                });

                player.on('ready', ()=>{
                    // that.overdueHiddenVideoControlBar();
                });
            });
            this.videoPlayer = player;
        },
        //
        shiftFullVideo(){
            if(this.isIosAppEnv) {
                window.webkit.messageHandlers.GotoFullscreen.postMessage({});
            } else if(this.isAndAppEnv){
                window.JsInterface.GotoFullscreen();
            } else {
                this.videoIsFullScreen = !this.videoIsFullScreen;
            }
            this.overdueHiddenVideoControlBar();
        },
        // 控制栏显示5s后隐藏
        overdueHiddenVideoControlBar(){
            this.isOverdueHiddenVideoControlBar = false;
            let lastClickVideoTimeForBar = new Date().getTime();
            this.lastClickVideoTimeForBar = lastClickVideoTimeForBar;

            setTimeout(()=>{
                if(lastClickVideoTimeForBar == this.lastClickVideoTimeForBar && this.videoIsPlaying){
                    this.isOverdueHiddenVideoControlBar = true;
                }
            }, 5000);
        },
    },

}
</script>
<style lang="scss" scoped>

</style>